mixin connectorUsage(fnSymbol)
  .heading
    | Usage
  - var rendererOptionsT = fnSymbol.params[0].type.params[0].name;
  - var widgetOptionT = fnSymbol.returns[0].type.params ? fnSymbol.returns[0].type.params[0].name : 'undefined';
  - var widgetName = rendererOptionsT.replace('RenderingOptions', '')
  pre.CodeMirror.cm-s-mdn-like
    code
      span.cm-keyword const 
      span.cm-def search
      | = 
      span.cm-variable instantsearch
      | (
      span.cm-comment /* parameters */
      | );
      br
      br
      span.cm-keyword const 
      span.cm-variable make!{widgetName}
      span.cm-operator = 
      span.cm-variable instantsearch
      | .
      span.cm-variable connectors
      | .
      span.cm-variable-2=fnSymbol.name
      | (
      br
      span.cm-keyword='  function '
      span.cm-variable renderFn
      | (
      br
      span.cm-variable='      renderOpts'
      | : 
      span.cm-def
        a.typed-link(href=`${navPath}#struct-${rendererOptionsT}`)=rendererOptionsT
      | ,
      br
      span.cm-variable='      isFirstRendering'
      | : 
      span.cm-def boolean
      | ) {
      br
      span.cm-comment=`    // render the custom ${widgetName} widget`
      br
      |   }
      | )
      span.cm-operator ;
      br
      br
      |
      span.cm-keyword const  
      span.cm-variable custom!{widgetName} 
      span.cm-operator = 
      span.cm-variable-2 make!{widgetName}
      | (
      span.cm-variable instanceOpts
      | : 
      span.cm-def
        a.typed-link(href=`${navPath}#struct-${widgetOptionT}`)=widgetOptionT
      | )
      span.cm-operator ;
      br
      |
      span.cm-variable search
      | .
      span.cm-property addWidget
      | (
      span.cm-variable custom!{widgetName}
      | )
      span.cm-operator ;
